<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <a-col :span="24">
        <div class="title">问题详情</div>
      </a-col>
      <a-col :span="24">
        <a-card>
          <a-row :gutter="[20, 20]">
            <a-col :span="20">
              <div class="warrap">
                <span>问题:</span>
                <span>
                  fdkjsaldfjlajjfljffffffffffffffffjfjfjjfjfjfjjfjfjfjfjfj
                </span>
              </div>
            </a-col>
            <a-col :span="4">
              <div class="warrap">
                <span>启用:</span>
                <a-switch
                  :checkedValue="1"
                  :unCheckedValue="0"
                  v-model:checked="formState.checked"
                />
              </div>
            </a-col>
            <a-col :span="24">
              <div class="warrap">
                <span>回复:</span>
                <div>
                  <a-table
                    :dataSource="formState.dataSource"
                    :columns="formState.columns"
                    bordered
                  />
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="24">
        <span class="title">课程评价</span>
      </a-col>
      <a-col :span="24">
        <a-card>
          <a-row>
            <a-col :span="24">
              <a-table
                  :dataSource="formState.eassessData"
                  :columns="formState.eassessColumns"
                />
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>

<script>
import { useI18n } from "vue-i18n";

import { useRouter, useRoute } from "vue-router";

import dictEnum from "@/const/dict";
import { getDictByCodesReturnObj } from "@/tools/get-dict";

import { defineComponent, reactive, onMounted, ref, onActivated } from "vue";
import moment from "moment";
export default defineComponent({
  setup() {
    const { t } = useI18n();
    const router = useRouter();
    const route = useRoute();

    const formState = reactive({
      checked: 0,
      dataSource: [],
      columns: [
        {
          title: "选项",
          dataIndex: "namea",
          key: "namea",
        },
        {
          title: "非常满意",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "满意",
          dataIndex: "addresss",
          key: "address",
        },
        {
          title: "一般",
          dataIndex: "addressa",
          key: "address",
        },
        {
          title: "不满意",
          dataIndex: "addressa",
          key: "address",
        },
        {
          title: "非常不满意",
          dataIndex: "addressa",
          key: "address",
        },
        {
          title: "受访总人数",
          dataIndex: "addressd",
          key: "address",
        },
      ],
      eassessData: [],
      eassessColumns: [
        {
          title: "项目名称",
          dataIndex: "namea",
          key: "namea",
        },
        {
          title: "课程名称",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "姓名",
          dataIndex: "addresss",
          key: "address",
        },
        {
          title: "所在学校",
          dataIndex: "addressa",
          key: "address",
        },
        {
          title: "评价分数",
          dataIndex: "addressa",
          key: "address",
        },
        {
          title: "评价时间",
          dataIndex: "addressa",
          key: "address",
        },
      ],
    });
    const labelCol = { span: 3, offset: 12 };
    const wrapperCol = { span: 14 };

    let modelForm = reactive({
      data: {},
    });
    let dictLists = reactive({
      data: []
    })
    onMounted(async () => {
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.SEX,
        dictEnum.DOCUMENT_TYPE,
      ]);
    });
    return {
      t,
      modelForm,
      labelCol,
      wrapperCol,
      formState,
    };
  },
});
</script>

<style lang="less" scoped>
.title {
  padding-left: 24px;
}
.warrap {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;

  span {
    width: 36px;
    text-align: left;
    margin-right: 10px;
  }
  div {
    width: 100%;
  }
}
</style>